<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import useOaEmpFormService from '@/services/pages/base-info/useOaEmpFormService'
  import { FormInstance } from 'element-plus'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { form, formSaveLoading, formSave, resetForm } = useOaEmpFormService()

  defineOptions({
    name: 'StorePostingFormModal',
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  const props = defineProps({
    oaEmp: {
      type: Object as PropType<BaseInfoAPIResponse.OaEmpListItem>,
      default: () => {
        return {
          id: '',
          jobNumber: '',
          name: '',
          defaultChoose: 0,
        }
      },
    },
  })

  const formInstance = ref<FormInstance | null>(null)
  const visible = defineModel<boolean>('modelValue', { default: false })
  const rules = {
    jobNumber: [
      {
        required: true,
        message: '请输入账号',
        trigger: ['blur', 'change'],
      },
    ],
    name: [
      {
        required: true,
        message: '请输入账号名称',
        trigger: ['blur', 'change'],
      },
    ],
  }

  const hideDialog = () => {
    resetForm()
    visible.value = false
  }

  const onConfirmClick = async () => {
    if (!formInstance.value) return
    try {
      await formInstance.value.validate()
      const res = await formSave()
      if (res) {
        if (res.code === 20000) {
          HMessage.success('操作成功')
          hideDialog()
          emits('update')
          return
        }

        HMessageBox.error(res.message)
        return
      }

      HMessageBox.error('提交失败，请稍后重试')
    } catch (e) {
      // e
    }
  }

  watch(visible, (value) => {
    if (value && props.oaEmp.id) {
      form.value = {
        defaultChoose: props.oaEmp.defaultChoose,
        id: props.oaEmp.id,
        name: props.oaEmp.name,
        jobNumber: props.oaEmp.jobNumber,
      }
    }
  })
</script>

<template>
  <h-dialog
    v-model="visible"
    :title="props.oaEmp.id ? '新增OA账号' : '修改OA账号'"
    :loading="formSaveLoading"
    @close="hideDialog"
  >
    <el-form
      ref="formInstance"
      inline-message
      :model="form"
      label-position="top"
      class="modal_form_content"
      :rules="rules"
    >
      <el-form-item label="账号名称" prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入账号名称" />
      </el-form-item>
      <el-form-item label="账号" prop="jobNumber">
        <el-input v-model.trim="form.jobNumber" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item
        v-if="!props.oaEmp.id || (props.oaEmp.id && props.oaEmp.defaultChoose === 0)"
        label="是否为默认"
        prop="defaultChoose"
        class="same_line"
      >
        <el-radio-group v-model="form.defaultChoose" size="small">
          <el-radio :value="0" :label="'否'" />
          <el-radio :value="1" :label="'是'" />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirmClick">提交</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>
